<template>
  <div class="home-content">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" loop>
      <van-swipe-item
        v-for="(image, index) in imagesList"
        :key="index">
        <van-image
          class="slider-img"
          fit="cover"
          :src="image.pic"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航分类 -->
    <van-tabs
      v-model="active"
      class="listtabs"
        @click="navClass"
      sticky>
      <van-tab
        v-for="(item, index) in songList"
        :key="index"
        :title="item">
        <!-- 歌单 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in playList"
            @click="Onsonglist(item.id)"
            :key="item.id">
            <div class="content">
              <img :src="item.coverImgUrl" alt="">
              <div>
                <h5>{{ item.name }}</h5>
                <span>{{ item.description }}</span>
              </div>
            </div>
          </van-cell>
        </van-list>
        <div style="height:30px;"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { toplist } from '@/api/songlist'
import { banner } from '@/api/home'
export default {
  name: 'HomeIndexM',
  components: {},
  props: {},
  data () {
    return {
      active: 0, // 默认激活
      songList: [
        '全部', '华语', '流行', '摇滚', '民谣',
        '欧美', '说唱', '电子', '轻音乐', '影视原声',
        'ACG', '怀旧', '治愈', '旅行'
      ], // 歌单分类
      imagesList: [], // 轮播图
      playList: [], // 歌单数据
      loading: false,
      finished: false,
      total: 0, // 总条数
      page: 1, // 页码
      cat: '全部' // 初始默认参数
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    navClass (name, title) {
      this.playList = []
      this.cat = title
      this.onLoad()
    },
    Onsonglist (id) {
      this.$router.push({
        name: 'm.songlist',
        params: {
          id
        }
      })
    },
    async getData () {
      const slider = await banner(1)
      this.imagesList = slider.data.banners
    },
    async onLoad () {
      // 1. 请求获取歌单信息数据
      const list = await toplist(
        30,
        (this.page - 1) * 30,
        this.cat
      )
      // 2. 把数据放到数组中
      this.playList.push(...list.data.playlists)
      this.total = list.data.total
      // 3. 设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
      this.loading = false
      this.page++
      // 4. 数据全部加载完成
      if (this.playList.length >= this.total) {
        // 没有数据了，把加载状态设置结束，不再触发加载更多
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-content{
  .listtabs{
    /deep/.van-tabs__wrap{
      height: 30px;
    }
    /deep/.van-tabs__nav{
      // background-color: #e9f8ff;
      .van-tab{
        span{
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }
  .slider-img{
    height: 120px;
  }
  .content{
    img{
      width: 100px;
      height: 68px;
    }
    display: flex;
    justify-content: space-around;
    align-items: center;
    div{
      width: 200px;
      height: 80px;
      overflow: hidden;
      h5{
        white-space: nowrap;
      }
      span{
        font-size: 12px;
      }
    }
  }
}
</style>
